<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3379001_z2ljlpdfnxa.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet/less" type="text/css" href="css/xStyle.less"/>
    <script type="text/javascript" src="js/lib/less.js"></script>
    <title></title>
</head>
<body>

<h1> </h1>
<div id="x11" style="width:400px;">
</div>
<h1> </h1>

<div id="x12" style="width:400px;">
</div>

<h1> </h1>

<div id="x13" style="width:400px;"></div>

<h1> </h1>


<div id="x14" style="width:400px;"></div>
<h1> </h1>
<div id="x15" style="width:400px;"></div>

<h1> </h1>
<div id="x16" style="width:400px;"></div>

<h1> </h1>

<div id="x17" style="width:400px;"></div>
<h1> </h1>

<div id="x21" style="width:400px;">
</div>
<h1> </h1>
<div id="x22" style="width:400px;">
</div>
<h1> </h1>


<div id="x23" style="width:400px;"></div>

<h1> </h1>


<div id="x24" style="width:400px;"></div>

<h1> </h1>


<div id="x25" style="width:400px;"></div>

<h1> </h1>

<div id="x26" style="width:400px;"></div>


<h1> </h1>
<div id="x27" style="width:400px;"></div>

<h1> </h1>
</body>
<script type="module">

    import xDatePicker from "./js/src/xDatePicker.js";


    var cfg11 = {el: 'x11', type: 'time', placeholder: '请选择时间', format: 'hh:mm'};
    new xDatePicker(cfg11);


    var cfg12 = {el: 'x12', type: 'datetime', placeholder: '请选择日期时间', mandatory: true, format: 'yyyy-MM-dd hh:mm:ss'};
    new xDatePicker(cfg12);


    var cfg13 = {el: 'x13', type: 'date', placeholder: '请选择日期', mandatory: true, format: 'yyyy-MM-dd'};
    new xDatePicker(cfg13);


    var cfg14 = {el: 'x14', type: 'week', placeholder: '请选择周', mandatory: true, format: 'yyyy年第w周'};
    new xDatePicker(cfg14);


    var cfg15 = {el: 'x15', type: 'month', placeholder: '请选择月', mandatory: true, format: 'yyyy年M月'};
    new xDatePicker(cfg15);


    var cfg16 = {el: 'x16', type: 'quarter', placeholder: '请选择季度', mandatory: true, format: 'yyyy年第q季度'};
    new xDatePicker(cfg16);


    var cfg17 = {el: 'x17', type: 'year', placeholder: '请选择年', mandatory: true, format: 'yyyy年'};
    new xDatePicker(cfg17);
    
        var cfg21 = {el: 'x21', type: 'time-range', placeholder: '请选择时间', format: 'hh:mm'};
    new xDatePicker(cfg21);


    var cfg22 = {el: 'x22', type: 'datetime-range', placeholder: '请选择日期时间', mandatory: true, format: 'yyyy-MM-dd hh:mm:ss'};
    new xDatePicker(cfg22);


    var cfg23 = {el: 'x23', type: 'date-range', placeholder: '请选择日期', mandatory: true, format: 'yyyy-MM-dd'};
    new xDatePicker(cfg23);


    var cfg24 = {el: 'x24', type: 'week-range', placeholder: '请选择周', mandatory: true, format: 'yyyy年第w周'};
    new xDatePicker(cfg24);


    var cfg25 = {el: 'x25', type: 'month-range', placeholder: '请选择月', mandatory: true, format: 'yyyy年M月'};
    new xDatePicker(cfg25);


    var cfg26 = {el: 'x26', type: 'quarter-range', placeholder: '请选择季度', mandatory: true, format: 'yyyy年第q季度'};
    new xDatePicker(cfg26);


    var cfg27 = {el: 'x27', type: 'year-range', placeholder: '请选择年', mandatory: true, format: 'yyyy年'};
    new xDatePicker(cfg27);


</script>
</html>
